<template>
  <div class="roles-contail">
    <van-nav-bar class="header"
                 title="身份选择"
                 left-arrow
                 @click-left="goBack()">
      <span slot="right"
            @click="logout">退出</span>
    </van-nav-bar>
    <div class="weaper">
      <el-row :span="24"
              :gutter="20"
              class="list">
        <el-col :span="12"
                v-for="(item,index) in userType"
                :key="index">
          <div class="border"
               :style="{ 'borderColor': item.color,'backgroundColor': item.color}"
               @click="handleSubmit(item.value)">
            <van-icon :name="item.icon"></van-icon>
            <p v-text="item.label"></p>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="选择小区"
               :visible.sync="box"
               width="100%"
               fullscreen
               :close-on-click-modal="false">
      <van-cell-group>
        <van-cell :title="item.name"
                  v-for="(item,index) in list"
                  :key="index"
                  @click.native="setWuyeDefault(item)" />
      </van-cell-group>
    </el-dialog>
  </div>
</template>

<script>
import baseCommon from '@/mixins/common';
import { validatenull } from '@/util/validate';
import { mapGetters } from 'vuex';
import { getWuyeAuth, setWuyeDefault } from '@/api/user';
import DIC from '@/const/dic';

export default {
  name: 'rolesContail',
  mixins: [baseCommon()],
  data() {
    return {
      box: false,
      list: [],
      userType: DIC.userType,
    };
  },
  created() {
  },
  computed: {
    ...mapGetters(['userInfo', 'isWuye', 'website']),
  },
  mounted() { },
  methods: {
    logout() {
      this.$store.dispatch('FedLogOut')
        .then(() => {
          this.$router.replace({ path: '/user/index' });
        });
    },
    setWuyeDefault(item) {
      this.$store.commit('SET_COMMUNITY', {
        communityId: item.id,
        communityName: item.name,
      });
      setWuyeDefault(item.id, this.userInfo.userId).then(() => {
        this.$router.replace({ path: this.website.indexPath });
      });
    },
    handleSubmit(index) {
      if (index === 2) {
        this.$store.commit('SET_ROLES', this.website.rolesType.YZ);
        if (validatenull(this.userInfo.houseId)) {
          this.$router.push({ path: this.website.authPath });
        } else {
          this.$router.replace({ path: this.website.indexPath });
        }
      } else {
        this.$store.commit('SET_ROLES', this.userInfo.userType);
        getWuyeAuth().then((res) => {
          const data = res.data;
          const attributes = data.attributes;
          if (validatenull(attributes)) {
            this.list = data.obj;
            this.box = true;
          } else {
            this.$store.commit('SET_COMMUNITY', {
              communityId: attributes.default_community.communityId,
              communityName: attributes.default_community.communityName,
            });
            this.$router.replace({ path: this.website.indexPath });
          }
        });
      }
    },
  },
};
</script>

<style lang="scss">
.weaper {
  height: 100%;
  .list {
    padding: 0 20px;
    height: 100%;
    .border {
      padding: 30px 0;
      color: #fff;
      text-align: center;
      border-width: 1px;
      border-style: solid;
      border-radius: 5px;
      i {
        margin-bottom: 13px;
        font-size: 36px;
      }
      p {
        font-size: 18px;
      }
    }
  }
}
</style>

